<template>
  <div >
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">业务发展</div>
      </div>
    </div>
    <div class="content" style="margin-top:3px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="分产品" name="first">
          <points-products ref="tab1" v-if="isFirst"></points-products>
        </el-tab-pane>
        <el-tab-pane label="分渠道" name="second">
          <points-channels ref="tab2" v-if="isSecond"></points-channels>
        </el-tab-pane>
        <el-tab-pane label="新增趋势" name="third">
          <xz-trend ref="tab3" v-if="isThird"></xz-trend>
        </el-tab-pane>
        <el-tab-pane label="净增趋势" name="fourth">
          <jz-trend ref="tab4" v-if="isFourth"></jz-trend>
        </el-tab-pane>
        <el-tab-pane label="质态报表" name="five">
          <quality-statement ref="tab5" v-if="isFive"></quality-statement>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import pointsProducts from "@/views/budget/tracking/pointsProducts";
  import pointsChannels from "@/views/budget/tracking/pointsChannels";
  import xzTrend from "@/views/budget/tracking/xzTrend";
  import jzTrend from "@/views/budget/tracking/jzTrend";
  import qualityStatement from "@/views/budget/tracking/qualityStatement";
  import { getSessionStorage } from "@/common/js/storage";
  export default {
    components:{
      pointsProducts,
      pointsChannels,
      xzTrend,
      jzTrend,
      qualityStatement
    },
    data(){
      return{
        activeName:"first",
        isFirst:true,
        isSecond:false,
        isThird:false,
        isFourth:false,
        isFive:false,
      }
    },
    mounted(){
      // this.$refs.tab1.init();
    },
    methods:{
      handleClick(tab,event){
        if(tab.name == "first"){
          this.isFirst = true;
          this.isSecond = false;
          this.isThird = false;
          this.isFourth = false;
          this.isFive = false;
          // this.$refs.tab1.init();
        }
        if(tab.name == "second"){
          this.isSecond = true;
          this.isFirst = false;
          this.isThird = false;
          this.isFourth = false;
          this.isFive = false;
          // this.$refs.tab2.init();
        }
        if(tab.name == "third"){
          this.isThird = true;
          this.isFirst = false;
          this.isSecond = false;
          this.isFourth = false;
          this.isFive = false;
          // this.$refs.tab3.init();
        }
        if(tab.name == "fourth"){
          this.isFourth = true;
          this.isFirst = false;
          this.isSecond = false;
          this.isThird = false;
          this.isFive = false;
          // this.$refs.tab4.init();
        }
        if(tab.name == "five"){
          this.isFive = true;
          this.isFirst = false;
          this.isSecond = false;
          this.isFourth = false;
          this.isThird = false;
          // this.$refs.tab5.init();
        }

      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
